<template>
  <!-- 来源标签 -->
  <div class="tags-source">
    <p class="tags-w70"><span>来源:</span></p>
    <ul class="tags-source-list">
      <li :class="sourceIndex === index ? 'active' :''" v-for="(item,index) in sourceList" :key="index" @click="sourceHandler(index,item)">{{item}}</li>
    </ul>
  </div>
</template>

<script>

export default {
  props: {
    // 品牌
    sourceList: {
      type:Array,
      default: ()=>{
        return []
      }
    },
  },
  data () {
    return {
      //控制来源索引状态切换标签
      sourceIndex:0,
    }
  },
  methods: {
    // 来源
    sourceHandler(index,item){
      this.sourceIndex = index;
      if(item==="全部"){
        item=""
      }
      this.$emit("sendSourceHandler",item)
    },
  },
  computed: {
  
  },
  mounted() {

  },

}
</script>

<style scoped>
  .tags-source{
    display:flex;
    overflow:hidden;
  }
  .tags-source .active{
    color:#ffffff;
    font-weight: 500;
  }
  .tags-w70{
    width: 70px;
    white-space:nowrap;
    padding-top:18px;
    flex-shrink: 0;
  }
  ul.tags-source-list{
    flex-grow:9;
    min-width:1008px;
    display:flex;
    flex-wrap:wrap;
  }
  ul.tags-source-list li{
    margin:18px 40px 18px 0;
    cursor:pointer;
    transition: all .2s ease;
  }
  ul.tags-source-list li:hover{
    color:#ffffff;
  }
</style>
